<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<script>
    // 常量路由
    const constRoute = [
        {
            path: '/login',
            component: () => import('@/views/login/index.vue'),
            name: 'login',
            meta: {
                title: '登录',
                hidden: true, // 代表路由标题再菜单中是否隐藏
                icon: 'House'
            }
        },
        {
            path: '/',
            component: () => import('@/layout/index.vue'),
            name: 'layout',
            meta: {
                title: 'layout',
                hidden: true,
                icon: 'Notification'
            },
            redirect: '/home',
            children: [
                {
                    path: '/home',
                    component: () => import('@/views/home/index.vue'),
                    meta: {
                        title: '首页',
                        hidden: false,
                        icon: 'HomeFilled'
                    },
                },
            ]
        },
        {
            path: '/404',
            component: () => import('@/views/404/index.vue'),
            name: '404',
            meta: {
                title: '404',
                hidden: true,
                icon: 'Odometer'
            },
        }, 
        {
            path: '/screen',
            component: () => import('@/views/screen/index.vue'),
            name: 'Screen',
            meta: {
                title: '数据大屏',
                icon: 'Platform',
                hidden: false
            }
        },
    
    ]
    // 异步路由
    const asyncRoute = [
    {
        path: '/acl',
        component: () => import('@/layout/index.vue'),
        name: 'Acl',
        meta: {
            title: '权限管理',
            hidden: false,
            icon: 'Lock'
            
        },
        redirect: '/acl/user',
        children: [
            {
                path: '/acl/user',
                component: () => import('@/views/acl/user/index.vue'),
                name: 'User',
                meta: {
                    title: '用户管理',
                    hidden: false,
                    icon: 'User'
                }
            },
            {
                path: '/acl/role',
                component: () => import('@/views/acl/role/index.vue'),
                name: 'Role',
                meta: {
                    title: '角色管理',
                    hidden: false,
                    icon: 'UserFilled'
                }
            },
            {
                path: '/acl/permission',
                component: () => import('@/views/acl/permission/index.vue'),
                name: 'Permission',
                meta: {
                    title: '菜单管理',
                    hidden: false,
                    icon: 'Monitor'
                }
            }
        ]
    },
    {
        path: '/product',
        component: () => import('@/layout/index.vue'),
        name: 'Product',
        meta: {
            title: '商品管理',
            hidden: false,
            icon: 'Goods'
        },
        redirect: '/product/trademark',
        children: [
            {
                path: '/product/trademark',
                component: () => import('@/views/product/trademark/index.vue'),
                name: 'Trademark',
                meta: {
                    title: '品牌管理',
                    hidden: false,
                    icon: 'shoppingCartFull'
                }
                
            },
            {
                path: '/product/attr',
                component: () => import('@/views/product/attr/index.vue'),
                name: 'Attr',
                meta: {
                    title: '属性管理',
                    hidden: false,
                    icon: 'ChromeFilled'
                }
                
            },
            {
                path: '/product/spu',
                component: () => import('@/views/product/spu/index.vue'),
                name: 'Spu',
                meta: {
                    title: 'SPU管理',
                    hidden: false,
                    icon: 'Calendar'
                }
                
            },
            {
                path: '/product/sku',
                component: () => import('@/views/product/sku/index.vue'),
                name: 'Sku',
                meta: {
                    title: 'SKU管理',
                    hidden: false,
                    icon: 'Orange'
                }
                
            }
        ]
    }
]
    
    // 任意路由
    const anyRoute = [
        {
            path: '/:pathMatch(.*)*',
            redirect: '/404',
            name: 'any',
            meta: {
                title: '任意',
                hidden: true,
                icon: 'Edit'
            },
        },
    ]

    // 硅谷333： routes: ['Product', 'Trademark', 'Sku']
    const guigu333 = ['Product', 'Trademark', 'Sku']
    function filterAsyncRoute(asyncRoute, routes) {
       return asyncRoute.filter(item => {
            if (routes.includes(item.name)) {
                if (item.children && item.children.length > 0) {
                    // 注意一个问题：这里直接赋值会影响到原来的异步路由，第二个人登录会受影响
                    // 需用深拷贝
                   item.children = filterAsyncRoute(item.children, routes)
                }
                return true
            }
        })
    }

   const guigu333res = filterAsyncRoute(asyncRoute, guigu333)
   console.log(guigu333res);

    // 由于两个对象共用一个地址，导致异步路由缺少两个
   console.log(asyncRoute);

</script>